<!DOCTYPE html>
<html>
  <head>
    <title>y86-64 Simulator</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>

    <div id="app"></div>

<script type="text/template" id="default_y86_code"># Execution begins at address 0 
    .pos 0
    irmovq stack, %rsp      # Set up stack pointer
    call main       # Execute main program
    halt            # Terminate program 

# Array of 4 elements
    .align 8
array:  .quad 0x000d000d000d
    .quad 0x00c000c000c0
    .quad 0x0b000b000b00
    .quad 0xa000a000a000

main:   irmovq array,%rdi
    irmovq $4,%rsi
    call sum        # sum(array, 4)
    ret

# long sum(long *start, long count)
# start in %rdi, count in %rsi
sum:    irmovq $8,%r8        # Constant 8
    irmovq $1,%r9        # Constant 1
    xorq %rax,%rax       # sum = 0
    andq %rsi,%rsi       # Set CC
    jmp     test         # Goto test
loop:   mrmovq (%rdi),%r10   # Get *start
    addq %r10,%rax       # Add to sum
    addq %r8,%rdi        # start++
    subq %r9,%rsi        # count--.  Set CC
test:   jne    loop          # Stop when 0
    ret                  # Return

# Stack starts here and grows to lower addresses
    .pos 0x200
stack:

    </script>

    <script type="text/template" id="tmpl_app">
        <div class="header">
            <h1>Y86-64 Simulator</h1>
            <div class="actions">
                <button class="compile"><i class="fa fa-bolt"></i> Assemble</button>
                <button class="reset"><i class="fa fa-repeat"></i> Reset</button>
                <button class="step"><i class="fa fa-angle-right"></i> Step</button>
                <button class="continue"><i class="fa fa-angle-double-right"></i> <span>Start</span></button>
            </div>
            <div class="links">
                <a href="https://github.com/boginw/js-y86/tree/master/samples">Examples</a>
                <a href="https://github.com/boginw/js-y86/wiki">Wiki</a>
                <a href="https://github.com/boginw/js-y86">GitHub <i class="fa fa-github"></i></a>
            </div>
        </div>
        <div class="app-body">
            <div class="editor"></div>
            <div class="inspector"></div>
            <div class="memory"></div>
        </div>
    </script>

    <script type="text/template" id="tmpl_editor">
        <h2>Source code</h2>
        <div class="code"><%= code %></div>
    </script>

    <script type="text/template" id="tmpl_inspector">
        <div class="object"></div>
        <div class="registers-wrapper"></div>
    </script>

    <script type="text/template" id="tmpl_memory">
        <h2>Memory</h2>
        <div class="mem-header">
            <div class="address">Addr</div>
            <div class="value">Value</div>
        </div>
        <div class="mem-words-wrapper">
            <div class="mem-words">
                <div class="stack-pointers">
                    <div class="rbp"><i class="fa fa-caret-left"></i> RBP</div>
                    <div class="rsp"><i class="fa fa-caret-left"></i> RSP</div>
                </div>
            </div>
        </div>
    </script>

    <script type="text/template" id="tmpl_object_code">
        <h2>Object code</h2>
        <div class="lines-wrapper">
            <div class="lines"></div>
        </div>
    </script>

    <script type="text/template" id="tmpl_object_code_error">
        <div class="line-no">Line <%= lineno %></div>
        <div class="source"><%= source %></div>
    </script>

    <script type="text/template" id="tmpl_mem_word">
        <div class="address"><%= address %></div>
        <div class="value"><%= value %></div>
    </script>

    <script type="text/template" id="tmpl_registers">
        <div class="column register_column">
            <h3>Registers</h3>
            <div class="register_holder">
                <div class="register">
                    <div class="label">%rax</div>
                    <div class="value_hex"><%= rax_hex %></div>
                    <div class="value_dec"><%= rax_dec %></div>
                </div>
                <div class="register">
                    <div class="label">%rcx</div>
                    <div class="value_hex"><%= rcx_hex %></div>
                    <div class="value_dec"><%= rcx_dec %></div>
                </div>
                <div class="register">
                    <div class="label">%rdx</div>
                    <div class="value_hex"><%= rdx_hex %></div>
                    <div class="value_dec"><%= rdx_dec %></div>
                </div>
                <div class="register">
                    <div class="label">%rbx</div>
                    <div class="value_hex"><%= rbx_hex %></div>
                    <div class="value_dec"><%= rbx_dec %></div>
                </div>
                <div class="register">
                    <div class="label">%rsp</div>
                    <div class="value_hex"><%= rsp_hex %></div>
                    <div class="value_dec"><%= rsp_dec %></div>
                </div>
                <div class="register">
                    <div class="label">%rbp</div>
                    <div class="value_hex"><%= rbp_hex %></div>
                    <div class="value_dec"><%= rbp_dec %></div>
                </div>
                <div class="register">
                    <div class="label">%rsi</div>
                    <div class="value_hex"><%= rsi_hex %></div>
                    <div class="value_dec"><%= rsi_dec %></div>
                </div>
                <div class="register">
                    <div class="label">%rdi</div>
                    <div class="value_hex"><%= rdi_hex %></div>
                    <div class="value_dec"><%= rdi_dec %></div>
                </div>
                <div class="register">
                    <div class="label">%r8</div>
                    <div class="value_hex"><%= r8_hex %></div>
                    <div class="value_dec"><%= r8_dec %></div>
                </div>
                <div class="register">
                    <div class="label">%r9</div>
                    <div class="value_hex"><%= r9_hex %></div>
                    <div class="value_dec"><%= r9_dec %></div>
                </div>
                <div class="register">
                    <div class="label">%r10</div>
                    <div class="value_hex"><%= r10_hex %></div>
                    <div class="value_dec"><%= r10_dec %></div>
                </div>
                <div class="register">
                    <div class="label">%r11</div>
                    <div class="value_hex"><%= r11_hex %></div>
                    <div class="value_dec"><%= r11_dec %></div>
                </div>
                <div class="register">
                    <div class="label">%r12</div>
                    <div class="value_hex"><%= r12_hex %></div>
                    <div class="value_dec"><%= r12_dec %></div>
                </div>
                <div class="register">
                    <div class="label">%r13</div>
                    <div class="value_hex"><%= r13_hex %></div>
                    <div class="value_dec"><%= r13_dec %></div>
                </div>
                <div class="register">
                    <div class="label">%r14</div>
                    <div class="value_hex"><%= r14_hex %></div>
                    <div class="value_dec"><%= r14_dec %></div>
                </div>
            </div>

        </div>
        <div class="column status_column">
            <h3>Flags</h3>
            <div class="flags">
                <div class="flag">
                    <div class="label">SF</div>
                    <div class="value"><%= sf %></div>
                </div>
                <div class="flag">
                    <div class="label">ZF</div>
                    <div class="value"><%= zf %></div>
                </div>
                <div class="flag">
                    <div class="label">OF</div>
                    <div class="value"><%= of %></div>
                </div>
            </div>
            <h3 class="status_header">Status</h3>
            <div class="status">
                <div class="label">STAT</div>
                <div class="value"><%= stat %></div>
            </div>
            <div class="err">
                <div class="label">ERR</div>
                <div class="value"><%= err %></div>
            </div>
            <div class="pc">
                <div class="label">PC</div>
                <div class="value"><%= pc %></div>
            </div>
        </div>
    </script>

    <script src="js/external/jquery.min.js"></script>
    <script src="js/underscore.js"></script>
    <script src="js/external/backbone-min.js"></script>
    <script src="js/long.js"></script>

    <script src="js/ace/ace.js"></script>

    <script src="js/y86.js"></script>
    <script src="js/assem.js"></script>
    <script src="js/instr.js"></script>
    <script src="js/general.js"></script>
    <script src="js/syntax.js"></script>

    <script src="js/views/app.js"></script>
    <script src="js/views/editor.js"></script>
    <script src="js/views/inspector.js"></script>
    <script src="js/views/memory.js"></script>
    <script src="js/views/registers.js"></script>
    <script src="js/views/objcode.js"></script>

    <script>
        $(function () {
            var app = new AppView();
            $('#app').append(app.$el);
        });

        // Don't lose unsaved work!
        window.onbeforeunload = function () {
            localStorage.y86_64_sim_src = editor.getSource();
        }
    </script>
  </body>
</html>


